<template>
  <div>
    <div class="c-ph24" v-if="!noneShow">
      <div class="c-fs40 c-fw-b c-mt40">找回密码</div>
      <div class="c-fs24 c-fc-gray c-mt10">请输入新密码并验证手机号</div>
      <div class="c-mt10 c-pv30 c-bd-b1-f6 c-flex-row c-justify-sb c-aligni-center c-fs26">
        <div class="c-flex-shrink0 c-flex-row c-aligni-center c-fc-xblack">
          <popup-picker :themeColor="$getThemeColor()" title="" valueTextAlign="left" class="c-fc-xblack picker c-fs26 c-lh" :data="areaList" v-model="areaValue" placeholder="请选择卡类型"></popup-picker>
          <span class="iconfont c-fs24 c-rotate90 c-ml10">&#xe635;</span>
        </div>
        <div class="c-flex-grow1 c-textAlign-r">{{mobile}}</div>
      </div>
      <div class="c-pv30 c-bd-b1-f6 c-flex-row c-aligni-center">
        <span class="c-flex-shrink0 c-fs26 c-lh c-mr20">验证码</span>
        <input type="text" v-model="code" @input="code=code.slice(0, 4)" placeholder="请输入验证码" maxlength="4" class="c-flex-grow1 c-textAlign-r c-fs26 c-fc-xblack c-lh c-ml10 c-bd0 c-w50 needsclick" />
        <span class="c-flex-shrink0 c-fs26 theme-fc c-lh c-ml20 c-block c-textAlign-r" @click="showImgCode">{{yzText}}</span>
      </div>
      <div class="c-pv30 c-bd-b1-f6 c-flex-row c-aligni-center">
        <span class="c-flex-shrink0 c-fs26 c-lh c-mr20">新密码</span>
        <input type="password" v-model="password" name="" placeholder="请输入新密码 (只能是6位数字)" maxlength="6" class="c-flex-grow1 c-textAlign-r c-fs26 c-fc-xblack c-lh c-ml10 c-bd0 c-w90" />
      </div>
      <div class="c-pv30 c-bd-b1-f6 c-flex-row c-aligni-center">
        <span class="c-flex-shrink0 c-fs26 c-lh c-mr20">确认密码</span>
        <input type="password" v-model="confrimPassword" name="" placeholder="请再次输入密码" maxlength="6" class="c-flex-grow1 c-textAlign-r c-w90 c-fs26 c-fc-xblack c-lh c-ml10 c-bd0" />
      </div>
      <div class="c-fc-white c-lh c-fs26 c-hh64 c-flex-row c-flex-center c-br40 c-mt40 theme-bg" @click="submit">完成</div>
    </div>
    <loading-status-tem :noData="noneShow" :noDataText="'您还没有绑定手机号，绑定手机号之后可修改支付密码'">
      <div class="c-fc-white c-lh c-fs32 c-mh24 c-pv28 c-textAlign-c c-br10 c-mt64 theme-bg" @click="goAddMobile">立即添加</div>
    </loading-status-tem>
    <cj-confirm :isShow="isShowImgCode" :option="{title:'图片验证码',titleCenter: true,showMasker: true,clickCloseModal: false,showCancelButton: true,cancelButtonText: '取消',confirmButtonText: '确认'}" @onConfirm="getYzcode();isShowImgCode = false;" @onCancel="isShowImgCode = false;">
      <div class="c-ph40 c-mt20">
        <input type="number" v-model="imgCode" placeholder="请输入图片中验证码" class="c-w100 c-bg-sgray c-br8 c-fs22 c-pv12 c-ph24 c-bd0 needsclick" />
        <div class="c-flex-row c-aligni-center c-pt20 c-pb20">
          <img :src="codeImgInfo.img" @click="getImgCode()" class="c-ww160" alt=""/>
          <span class="c-ml20 c-fs22 c-fc-gray" @click="getImgCode()">看不清？换一张</span>
        </div>
      </div>
    </cj-confirm>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index'
import { utilJs } from "@/utils/common.js"
import CjConfirm from "@/plugin/cjConfirm/cjConfirm.vue";
import { mapState } from "vuex";
// import { clearInterval } from 'timers';
export default {
  name: 'UpdatePassword',
  components: {
    PopupPicker,
    loadingStatusTem,
    CjConfirm
  },
  props: [],
  beforeCreate() {

  },
  created() {
    utilJs.appShare(this);
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      areaValue: ['+86'],
      areaList: [['+86', '美国', '马来西亚']],
      num: 60,
      interval: null,
      yzText: '获取验证码',
      isYz: true,
      isClick: false, // 是否点击了获取验证码
      noneShow: false, // 没数据时显示
      mobile: '', // 手机号
      code: null, // 验证码
      password: null, // 支付密码
      confrimPassword: null, // 确认密码
      isPost: true,
      codeImgInfo: '', //图形验证码信息
      imgCode: '', //填入的图形验证码
      isShowImgCode: false, //是否展示图形验证码
    }
  },
  computed: {
    ...mapState({
      showBindPhoneModal: (state) => state.oem_store.showBindPhoneModal,
    }),
  },
  watch: {
    password() {
      // 监听密码
      if (this.password && isNaN(this.password)) {
        this.password = ''
      } else if (this.password && this.password.length > 6) {
        this.password.substr(0, 6);
      }
    },
    confrimPassword() {
      // 监听确认密码
      if (this.confrimPassword == null && isNaN(this.confrimPassword)) {
        this.confrimPassword = ''
      } else if (this.confrimPassword != null && this.confrimPassword.length > 6) {
        this.confrimPassword.substr(0, 6)
      }
    },
    showBindPhoneModal(val) {
      if (localStorage.getItem("uMobile") && localStorage.getItem("uMobile") != undefined) {
        this.getUserInfo();
      }
    }
  },
  mounted() {

  },
  methods: {
    showImgCode() {
      this.imgCode = '';
      this.getImgCode();
      this.isShowImgCode = true;
    },
    getImgCode() {
      let $this = this;
      if ($this.isLoading == true) {
        return;
      }
      $this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}common/captcha`, res => {
        $this.codeImgInfo = res;
        $this.isLoading = false;
      }, failRes => {
        $this.isLoading = false;
      });
    },
    goAddMobile() {
      // 点击绑定手机号
      utilJs.goBindMobile();
    },
    getYzMethod: function () {
      this.isYz = false;
      this.num -= 1;
      this.yzText = this.num + '秒后重新获取';
      if (this.num == 0) {
        this.isClick = false
        clearInterval(this.interval);
        this.yzText = '获取验证码';
        this.isYz = true;
        this.num = 60;
      }
    },
    getYzcode: function () {
      if (!this.isClick) {
        this.isClick = true;
        if (this.mobile != null) {
          if (this.imgCode == '') {
            this.$showCjToast({
              text: "图片验证码不能为空",
              type: "warn",
            });
            this.isClick = false;
          } else {
            let $this = this;
            $this.yzText = "发送中";
            utilJs.postMethod(
              global.apiurl + "members/sendCode",
              {
                mobile: this.mobile,
                captcha: this.imgCode,
                captchaKey: this.codeImgInfo.key,
              },
              res => {
                if (res.errMsg) {
                  $this.yzText = "获取验证码";
                  $this.isClick = false;
                  $this.$showCjToast({
                    text: res.errMsg,
                    type: "warn",
                  });
                } else {
                  $this.interval = setInterval($this.getYzMethod, 1000);
                }
              },
              function () {
                clearInterval($this.interval);
                $this.yzText = "获取验证码";
                $this.isYz = true;
                $this.num = 60;
                $this.isClick = false;
              }
            );
          }
        } else {
          this.$showCjToast({
            text: "手机号不能为空",
            type: "warn",
          });
          this.isClick = false;
        }
      }
    },
    submit: function () {
      let $this = this
      if (this.code != null && this.password != null && this.confrimPassword != null) {
        if (this.confrimPassword.length < 6) {
          this.$showCjToast({
            text: '密码不能小于6位',
            type: 'warn',
          });
          return;
        }
        if (this.password == this.confrimPassword) {
          // 两次密码一致，提交修改
          if (this.isPost == true) {
            this.isPost = false;
            utilJs.postMethod(global.apiurl + "members/setPayPwd", {
              mobile: this.mobile,
              code: this.code,
              password: this.password
            }, function (res) {
              $this.$showCjToast({
                text: '修改成功',
                type: 'success',
              }).then(() => {
                $this.$router.go(-1)
              });
              $this.isPost = true;
              $this.code = null
              $this.password = null
              $this.confrimPassword = null
            }, function () {
              $this.isPost = true;
            })
          }
        } else {
          $this.$showCjToast({
            text: '两次密码不一致',
            type: 'warn',
          });
        }
      } else {
        $this.$showCjToast({
          text: '信息填写不完整',
          type: 'warn',
        });
      }
    },
    getUserInfo() {
      let $this = this
      utilJs.getMethod(global.apiurl + "members/PayPwdPage", function (res) {
        if (res.length == 0 || res.null) {
          $this.noneShow = true
        } else {
          $this.mobile = res
          $this.noneShow = false
        }
        // if(res != null || res != []) {
        //   $this.mobile = res
        //   $this.noneShow = false
        // } else {
        //   $this.noneShow = true
        // }
      })
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    this.isPost = true;
    this.imgCode = '';
    this.codeImgInfo = '';
    this.isShowImgCode = false;
    setDocumentTitle("余额密码设置");// eslint-disable-line
    this.getUserInfo();
    this.wechatShare();
  },
  deactivated() {
    this.num = 60;
    clearInterval(this.interval)
    this.yzText = '获取验证码';
    this.isYz = true;
    this.isClick = false; // 是否点击了获取验证码
    this.code = null;// 验证码
    this.password = null; // 支付密码
    this.confrimPassword = null; // 确认密码
    this.oldPhoneNumber = localStorage.getItem("uMobile");
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.picker > div {
  line-height: 1;
}
.picker /deep/ .vux-cell-value {
  color: #333!important;
}
</style>
